<div class="row" id="myModal1">
	<div class="col-xs-12">
		<div class="box">
			<!-- /.box-header -->
			<div class="box-body">
				<div style="padding-bottom: 20px;">
					<h5 id="mode_h5"></h5>
					<button id="back"  class="btn btn-primary" data-dismiss="modal" style="float:right;">返回</button>	
					<a id="addNode" class="btn btn-primary " data-toggle="modal" data-target="#myModal2">选择Master节点</a> 
					<a id="nextStep" class="btn btn-primary " data-toggle="modal" data-target="#">下一步</a> 
				</div>
				<div style="padding-bottom: 5px;">
					<span>节点IP:</span>
					<span id="nodeIp"></span>
				</div>
				<div style="padding-bottom: 10px;">
					<span>主机名:</span>
					<span id="nodeName"></span>
				</div>
				<table id="example" class="table table-bordered table-hover"
					style="font-size: 12px;">
					<thead>
						<tr>
							<th>角色</th>
							<th>参数名</th>
							<th>参数值</th>
							<th>描述</th>
						</tr>
					</thead>
				</table>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">选择节点</h4>
			</div>
			<div class="modal-body">
				<!-- Horizontal Form -->
		          <div class="box box-info" style="margin-bottom:0px;">
		            <!-- form start -->
		            <form class="form-horizontal">
		              <table id="example1" class="table table-bordered table-hover" style="font-size: 12px;">
						<thead>
						<tr>
							<th></th>
							<th>host_name</th>
							<th>ip</th>
							<th>root_passwd</th>  
							<th>last_update</th>
							<th>cores</th>
							<th>lacation</th>  
						</tr>
						</thead>
						</table>
		              <!-- /.box-body -->
		            </form>
		          </div>
		          <!-- /.box -->
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关<span style="padding-left: 12px" />闭
				</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" id="save">保<span style="padding-left: 12px" />存
				</button>
			</div>
		</div>
	</div>
</div>
<script>
$("#back").click(function(){
	$(".content").load("cluster_main.html");
});

//要添加的节点对话框的表格值
$('#example1').DataTable({
    "ajax":"/host/1",
    "columns": [
    			{ "data": "id", render: function ( data, type, row ) {
            		// Combine the first and last names into a single table field
            			return "<input type='radio' value='"+data+"'  class='chkbox' name='child' checked='checked'/>";
        		} },
    			{ "data": "hostName" },
    			{ "data": "ip" },
    			{ "data": "rootPasswd" },
    			{ "data": "lastUpdated" },
    			{ "data": "cores" },
    			{ "data": "location" },
    			  
       		],
   		"buttons": [
   		          {
   		              text: 'Reload',
   		              action: function ( e, dt, node, config ) {
   		                  dt.ajax.reload();
   		              }
   		          }
   		      ]
});	


//模版默认的值显示
$.ajax({
    url:"/deploycluster/getcurtemplate",
    type: "GET",
    dataType:"json",
    success: function(data){
    	$("#mode_h5").html("您选择了"+data.name+"模式，至少需要"+data.minNodes+"节点，建议"+data.maxNodes+"个节点");
    	$.each(data.standardAllIneOneNode.nodeRoleParams,function(i,item){
    		var count=0;
    		$.each(item,function(m,n){
    			count++;
    			$("#example").append("<tr><td>"+i+"</td><td>"+n.name+"</td><td><input type='text'  id='"+i+count+"' value='"+n.value+"'/></td><td>"+n.describe+"</td></tr>");
    		});
    	});
    	$("#nodeIp").html(data.nodes[0].ip);
    	$("#nodeName").html(data.nodes[0].hostName);
    }
}); 


//按保存，把数据添加到页面，同时保存到后台
$("#save").click(function(){
	var td = $(".chkbox:checked").first().parent("td");
	td = $(td).next("td");
	var nodename = jQuery.trim($(td).text());
	td = $(td).next("td");
	var nodeip = jQuery.trim($(td).text());
	td = $(td).next("td");
	var root_passwd = jQuery.trim($(td).text());
	var nodeid=$(".chkbox:checked").val();
	var _addnode=nodeip+","+nodeid+","+nodename+","+root_passwd;
	
	$.ajax({
        url:"/deploycluster/getnodemodal/singleNode",
        data:{
        	'addnode':_addnode
        },
        type: "GET",
        dataType:"json",
        success: function(data){
        	d.singleNode=data;
        }
    });
	
	$("#nodeIp").html(nodeip);
	$("#nodeName").html(nodename);
	        	
});


//保存修改的参数
$("#nextStep").click(function(){
	$(".content").load("modeNext.html?data=singleNode");
});
</script>